<template>
	<div class="btn">
		<button :disabled="count===1" @click="$emit('decrease')">
			<i class="iconfont icon-decrease"></i>
		</button>
		<span v-text="count"></span>
		<button :disabled="count===maxCount" @click="$emit('increase')">
			<i class="iconfont icon-increase"></i>
		</button>
	</div>
</template>

<script>
        //自定义组件
        //自定义组件如何定义才能接收父组件将来传给我的值呢？
        export default {
                name:"MiCount",
                props:{
                        count:{type:Number,required:true},
                        maxCount:{type:Number,default:8}
                },
                model:{
                        prop:"count",
                        event:"changeCount"
                },
                methods:{
                        decreaseHandler(){
                                this.$emit('decrease');
                                this.$emit('update:count',this.count-1);
                                this.$emit('changeCount',this.count-1)
                        },
                        increaseHandler(){
                                this.$emit('increase');
                                this.$emit('update:count',this.count+1);
                                this.$emit('changeCount',this.count+1)
                        }
                }
        }
</script>
<style scoped>
	.btn {
		display: flex;
		border: 1px solid #ccc;
	}
	.btn button {
		border: none;
		background-color: transparent;
		padding: 0 8px;
	}
	.btn span {
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		padding: 0 8px;
	}
</style>